<template>
	<view class="activities-page">
		<!-- 顶部导航栏 -->
		<view class="nav-tabs">
			<view class="tab-item" :class="{ active: currentTab === 'activity' }" @tap="switchTab('activity')">
				<text class="tab-text">活动</text>
				<view class="tab-underline" v-if="currentTab === 'activity'"></view>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'info' }" @tap="switchTab('info')">
				<text class="tab-text">信息录入</text>
				<view class="tab-underline" v-if="currentTab === 'info'"></view>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'medication' }" @tap="switchTab('medication')">
				<text class="tab-text">用药</text>
				<view class="tab-underline" v-if="currentTab === 'medication'"></view>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'inspection' }" @tap="switchTab('inspection')">
				<text class="tab-text">巡检任务</text>
				<view class="tab-underline" v-if="currentTab === 'inspection'"></view>
			</view>
		</view>

		<!-- 活动标签页内容 -->
		<view v-if="currentTab === 'activity'" class="medication-list">
			<view v-if="loading && eventsData.length === 0" class="loading-text">加载中...</view>
			<view v-else-if="activityEvents.length === 0" class="empty-text">暂无活动事件</view>
			<view class="medication-card" v-for="(item, index) in activityEvents" :key="`activity-${item.id}-${index}`">
				<view class="card-header">
					<text class="card-title">{{ item.rawEvent.title || '活动提醒' }}</text>
					<view class="status-tag" :class="item.statusClass">
						<text class="status-text">{{ item.statusText }}</text>
						<text class="status-time">{{ item.statusTime }}</text>
					</view>
				</view>
				
				<view class="card-content">
					<view class="info-row">
						<text class="info-label">老人姓名:</text>
						<text class="info-value">{{ item.patientName }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">活动时间:</text>
						<text class="info-value">{{ item.activityTime }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">活动描述:</text>
						<text class="info-value">{{ item.description }}</text>
					</view>
				</view>
				
				<view class="card-actions">
					<button class="action-btn primary" @tap="confirmMedication(item)">确认服药</button>
					<button class="action-btn secondary" @tap="showUploadModal(item)">上传图文</button>
					<button v-if="item.showPostpone" class="action-btn secondary" @tap="postponeReminder(item)">延后提醒</button>
				</view>
			</view>
		</view>

		<!-- 信息录入标签页内容 -->
		<view v-if="currentTab === 'info'" class="info-list">
			<view v-if="membersLoading && membersData.length === 0" class="loading-text">加载中...</view>
			<view v-else-if="elderlyList.length === 0" class="empty-text">暂无老人信息</view>
			<view class="info-card" v-for="(item, index) in elderlyList" :key="`elderly-${item.id}-${index}`">
				<view class="card-header">
					<text class="elderly-name">姓名: {{ item.name }}</text>
					<view class="status-tag" :class="item.statusClass">
						<text class="status-text">{{ item.statusText }}</text>
					</view>
				</view>
				
				<view class="card-content">
					<view class="info-grid">
						<view class="info-item">
							<text class="info-label">性别:</text>
							<text class="info-value">{{ item.gender }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">年纪:</text>
							<text class="info-value">{{ item.age }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">身份证号:</text>
							<text class="info-value">{{ item.idCard }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">籍贯:</text>
							<text class="info-value">{{ item.origin }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">婚姻状况:</text>
							<text class="info-value">{{ item.maritalStatus }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">既往病史:</text>
							<text class="info-value">{{ item.medicalHistory }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">过敏史:</text>
							<text class="info-value">{{ item.allergies }}</text>
						</view>
					</view>
				</view>
				
				<view class="card-actions">
					<button class="action-btn primary" @tap="goToInfoEntry(item)">信息录入</button>
					<button class="action-btn secondary" @tap="viewCareRecord(item)">护理记录</button>
				</view>
			</view>
		</view>

		<!-- 用药标签页内容 -->
		<view v-if="currentTab === 'medication'" class="medication-page">
			<!-- 日期选择器 -->
			<view class="date-selector">
				<scroll-view class="date-scroll" scroll-x="true">
					<view class="date-list">
						<view class="date-item" v-for="(date, index) in dateList" :key="index" :class="{ active: date.isActive }" @tap="selectDate(index)">
							<text class="date-week">{{ date.week }}</text>
							<text class="date-number">{{ date.number }}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 用药提醒列表 -->
			<view class="medication-reminder-list">
				<view v-if="loading && eventsData.length === 0" class="loading-text">加载中...</view>
				<view v-else-if="medicationEvents.length === 0" class="empty-text">暂无用药提醒</view>
				<view class="reminder-item" v-for="(item, index) in medicationEvents" :key="`medication-${item.id}-${index}`">
					<view class="time-indicator">
						<view class="time-dot"></view>
						<text class="time-text">{{ item.time }}</text>
					</view>
					<view class="medication-card">
						<text class="medication-name">{{ item.name }}</text>
						<text class="medication-instruction">{{ item.instruction }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 上传图文弹窗 -->
		<view class="upload-modal" v-if="showUploadModalFlag" @tap="closeUploadModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">上传图文</text>
					<view class="close-btn" @tap="closeUploadModal">
						<text class="close-icon">×</text>
					</view>
				</view>
				
				<view class="modal-body">
					<view class="form-item">
						<text class="form-label">活动名称</text>
						<input class="form-input" v-model="uploadForm.activityName" placeholder="喂药提醒" />
					</view>
					
					<view class="form-item">
						<text class="form-label">完成时间</text>
						<input class="form-input" v-model="uploadForm.completionTime" placeholder="2022-7-23 16:27:35" />
					</view>
					
					<view class="form-item">
						<text class="form-label">完成描述</text>
						<textarea class="form-textarea" v-model="uploadForm.description" placeholder="请输入备注信息" />
					</view>
					
					<view class="form-item">
						<text class="form-label">上传附件</text>
						<view class="attachment-area">
							<view class="attachment-item" v-if="uploadForm.attachments.length > 0">
								<image class="attachment-thumb" :src="uploadForm.attachments[0]" mode="aspectFill" />
								<view class="remove-btn" @tap="removeAttachment(0)">
									<text class="remove-icon">×</text>
								</view>
							</view>
							<view class="add-attachment" @tap="addAttachment">
								<text class="add-icon">+</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="modal-footer">
					<button class="modal-btn cancel" @tap="closeUploadModal">取消</button>
					<button class="modal-btn submit" @tap="submitUpload">提交</button>
				</view>
			</view>
		</view>

		<!-- 巡检任务标签页内容 -->
		<view v-if="currentTab === 'inspection'" class="inspection-page">
			<view class="inspection-list">
				<view v-if="loading && eventsData.length === 0" class="loading-text">加载中...</view>
				<view v-else-if="inspectionEvents.length === 0" class="empty-text">暂无巡检任务</view>
				<view class="inspection-card" v-for="(item, index) in inspectionEvents" :key="`inspection-${item.id}-${index}`">
					<view class="card-header">
						<text class="card-title">{{ item.title }}</text>
					</view>
					
					<view class="card-content">
						<view class="info-row">
							<text class="info-label">巡检对象:</text>
							<text class="info-value">{{ item.subject }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">巡检时间:</text>
							<text class="info-value">{{ item.time }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">巡检描述:</text>
							<text class="info-value">{{ item.description }}</text>
						</view>
					</view>
					
					<view class="card-actions" style="float: right;">
						<button class="action-btn primary" @tap="showInspectionModal(item)">巡检上报</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 巡检上报弹窗 -->
		<view class="inspection-modal" v-if="showInspectionModalFlag" @tap="closeInspectionModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">巡检上报</text>
					<view class="close-btn" @tap="closeInspectionModal">
						<text class="close-icon">×</text>
					</view>
				</view>
				
				<view class="modal-body">
					<view class="form-item">
						<text class="form-label">巡检人</text>
						<input class="form-input" v-model="inspectionForm.inspector" placeholder="王大锤" />
					</view>
					
					<view class="form-item">
						<text class="form-label">完成时间</text>
						<input class="form-input" v-model="inspectionForm.completionTime" placeholder="2022-7-23 16:27:35" />
					</view>
					
					<view class="form-item">
						<text class="form-label">巡检描述</text>
						<textarea class="form-textarea" v-model="inspectionForm.description" placeholder="请输入备注信息" />
					</view>
				</view>
				
				<view class="modal-footer">
					<button class="modal-btn cancel" @tap="closeInspectionModal">取消</button>
					<button class="modal-btn submit" @tap="submitInspection">提交</button>
				</view>
			</view>
		</view>

		<!-- 悬浮添加按钮 -->
		<view class="floating-add-btn" @tap="showRecordOptions">
			<text class="add-icon">+</text>
		</view>

		<!-- 添加记录选项弹窗 -->
		<view class="record-options-modal" v-if="showRecordOptionsFlag" @tap="closeRecordOptions">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">添加记录</text>
					<view class="close-btn" @tap="closeRecordOptions">
						<text class="close-icon">×</text>
					</view>
				</view>
				<view class="options-list">
					<view class="option-item" @tap="goToRecordEntry">
						<view class="option-icon">📝</view>
						<text class="option-text">护理记录录入</text>
						<view class="option-arrow">></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { apiGetTodayEvents, apiGetElderlyMembers, apiGetInspectionTasks } from '@/request/api.js'

export default {
	data() {
		return {
			// API数据
			eventsData: [],
			membersData: [], // 老人数据
			loading: false,
			membersLoading: false, // 老人数据加载状态
			currentPage: 1,
			pageSize: 10,
			totalCount: 0,
			hasMore: true,
			medicationList: [
				{
					id: 1,
					patientName: '王奶奶',
					activityTime: '2022-7-23 16:27:35',
					description: '张奶奶需要服用降压药,需要专人陪护 注意老人心态(每日2次,每次1片)',
					statusText: '即将逾期',
					statusTime: '14:30',
					statusClass: 'urgent',
					showPostpone: true
				},
				{
					id: 2,
					patientName: '李爷爷',
					activityTime: '2022-7-23 15:30:20',
					description: '李爷爷需要服用降糖药,需要专人陪护 注意老人心态(每日3次,每次1片)',
					statusText: '延后提醒',
					statusTime: '14:30',
					statusClass: 'postponed',
					showPostpone: false
				},
				{
					id: 3,
					patientName: '张奶奶',
					activityTime: '2022-7-23 14:15:10',
					description: '张奶奶需要服用维生素,需要专人陪护 注意老人心态(每日1次,每次2片)',
					statusText: '',
					statusTime: '',
					statusClass: '',
					showPostpone: true
				}
			],
			showUploadModalFlag: false,
			uploadForm: {
				activityName: '',
				completionTime: '',
				description: '',
				attachments: []
			},
			showInspectionModalFlag: false,
			inspectionForm: {
				inspector: '王大锤',
				completionTime: '',
				description: ''
			},
			showRecordOptionsFlag: false,
			currentTab: 'activity', // 当前激活的标签页

			dateList: [
				{ week: '昨天', number: '7', isActive: false },
				{ week: '今天', number: '8', isActive: true },
				{ week: '二', number: '9', isActive: false },
				{ week: '三', number: '10', isActive: false },
				{ week: '四', number: '11', isActive: false },
				{ week: '五', number: '12', isActive: false },
				{ week: '六', number: '13', isActive: false }
			],
			medicationReminders: [
				{ id: 1, time: '11:00', name: '布洛芬缓释胶囊', instruction: '用药2天, 每天1次, 每次1粒' },
				{ id: 2, time: '11:00', name: '布洛芬缓释胶囊', instruction: '用药2天, 每天1次, 每次1粒' },
				{ id: 3, time: '11:00', name: '布洛芬缓释胶囊', instruction: '用药2天, 每天1次, 每次1粒' },
				{ id: 4, time: '11:00', name: '布洛芬缓释胶囊', instruction: '用药2天, 每天1次, 每次1粒' },
				{ id: 5, time: '11:00', name: '布洛芬缓释胶囊', instruction: '用药2天, 每天1次, 每次1粒' },
				{ id: 6, time: '11:00', name: '布洛芬缓释胶囊', instruction: '用药2天, 每天1次, 每次1粒' }
			],
			inspectionTasks: [
				{
					id: 1,
					title: '巡检任务1',
					subject: '王奶奶',
					time: '2022-7-23 16:27:35',
					description: '张奶奶需要服用降压药,需要专人陪护 注意老人心态(每日2次,每次1片)'
				},
				{
					id: 2,
					title: '巡检任务1',
					subject: '王奶奶',
					time: '2022-7-23 16:27:35',
					description: '张奶奶需要服用降压药,需要专人陪护 注意老人心态(每日2次,每次1片)'
				},
				{
					id: 3,
					title: '巡检任务1',
					subject: '王奶奶',
					time: '2022-7-23 16:27:35',
					description: '张奶奶需要服用降压药,需要专人陪护 注意老人心态(每日2次,每次1片)'
				}
			]
		}
	},
	onLoad() {
		// 页面加载时的初始化
		this.loadEventsData();
		// 延时加载老人数据避免冲突
		setTimeout(() => {
			this.loadMembersData();
		}, 100);
	},
	onShow() {
		// 页面显示时刷新数据
		this.loadEventsData();
		// 延时加载老人数据避免冲突
		setTimeout(() => {
			this.loadMembersData();
		}, 100);
	},
	onPullDownRefresh() {
		// 下拉刷新
		Promise.all([
			this.loadEventsData(),
			this.loadMembersData()
		]).then(() => {
			uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
		// 上拉加载更多
		if (this.hasMore && !this.loading) {
			this.loadEventsData(true);
		}
	},
	computed: {
		// 活动事件 (type: 1)
		activityEvents() {
			return this.eventsData.filter(event => event.type === 1).map(event => ({
				id: event.id,
				patientName: event.name,
				activityTime: event.event_time,
				description: `${event.name} 需要${event.title} (${event.num_desc})`,
				statusText: this.getEventStatus(event.event_time).text,
				statusTime: this.formatTime(event.event_time),
				statusClass: this.getEventStatus(event.event_time).class,
				showPostpone: true,
				rawEvent: event
			}));
		},
		
		// 用药事件 (type: 2)
		medicationEvents() {
			return this.eventsData.filter(event => event.type === 2).map(event => ({
				id: event.id,
				time: this.formatTime(event.event_time),
				name: event.title,
				instruction: event.num_desc,
				patientName: event.name,
				rawEvent: event
			}));
		},
		
		// 巡检事件 (type: 8)
		inspectionEvents() {
			return this.eventsData.filter(event => event.type === 8).map(event => ({
				id: event.id,
				title: event.title,
				subject: event.name,
				time: event.event_time,
				description: event.desc || event.num_desc,
				rawEvent: event
			}));
		},
		
		// 老人列表 - 转换API数据为显示格式
		elderlyList() {
			return this.membersData
				.filter(member => member.name && member.id) // 过滤掉空数据
				.map(member => ({
					id: member.id,
					name: member.name,
					gender: member.sex === 0 ? '女' : '男',
					age: this.calculateAge(member.birthday),
					idCard: member.id_num || '未填写',
					origin: this.getLocation(member.province, member.city, member.area),
					maritalStatus: this.getMaritalStatus(member.marray),
					medicalHistory: member.history || '无',
					allergies: member.mi_history || '无',
					phone: member.phone || '',
					photo: member.photo || '',
					statusText: member.status === 1 ? '已入驻' : '未入驻',
					statusClass: 'settled',
					rawMember: member
				}));
		}
	},
	
	methods: {
		// 加载事件数据
		async loadEventsData(loadMore = false) {
			if (this.loading) return;
			
			try {
				this.loading = true;
				
				// 获取用户ID
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo || !userInfo.hasLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				
				const requestData = {
					uid: userInfo.uid || '33897', // 使用真实的uid，如果没有则使用默认值
					page: loadMore ? this.currentPage + 1 : 1,
					limit: this.pageSize
				};
				
				const response = await apiGetTodayEvents(requestData);
				
				if (response.code === 0) {
					if (loadMore) {
						this.eventsData = [...this.eventsData, ...response.data];
						this.currentPage++;
					} else {
						this.eventsData = response.data;
						this.currentPage = 1;
					}
					
					this.totalCount = response.count || 0;
					this.hasMore = response.data.length >= this.pageSize;
				}
			} catch (error) {
				console.error('加载事件数据失败:', error);
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		// 获取事件状态
		getEventStatus(eventTime) {
			if (!eventTime) return { text: '待处理', class: '' };
			
			const now = new Date();
			const eventDate = new Date(eventTime);
			const diffMinutes = (eventDate - now) / (1000 * 60);
			
			if (diffMinutes < -30) return { text: '已逾期', class: 'overdue' };
			if (diffMinutes < 0) return { text: '即将逾期', class: 'urgent' };
			if (diffMinutes < 30) return { text: '即将开始', class: 'urgent' };
			return { text: '待处理', class: 'pending' };
		},
		
		// 格式化时间
		formatTime(timeString) {
			if (!timeString) return '';
			const date = new Date(timeString);
			return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
		},
		
		// 加载老人数据
		async loadMembersData(loadMore = false) {
			console.log('开始加载老人数据...');
			// 使用单独的loading状态避免冲突
			if (this.membersLoading) return;
			
			try {
				this.membersLoading = true;
				
				// 获取用户信息
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo || !userInfo.hasLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				
				const requestData = {
					uid: userInfo.uid || '33897', // 使用真实的uid，如果没有则使用默认值
					page: loadMore ? this.currentPage + 1 : 1,
					limit: this.pageSize
				};
				
				console.log('发送请求参数:', requestData);
				const response = await apiGetElderlyMembers(requestData);
				console.log('接收到响应:', response);
				
				if (response.code === 0) {
					if (loadMore) {
						this.membersData = [...this.membersData, ...response.data];
						this.currentPage++;
					} else {
						this.membersData = response.data;
						this.currentPage = 1;
					}
					
					this.totalCount = response.count || 0;
					this.hasMore = response.data.length >= this.pageSize;
				}
			} catch (error) {
				console.error('加载老人数据失败:', error);
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				});
			} finally {
				this.membersLoading = false;
			}
		},
		
		// 计算年龄
		calculateAge(birthday) {
			if (!birthday || birthday === '0000-00-00') return '未知';
			const birth = new Date(birthday);
			const today = new Date();
			let age = today.getFullYear() - birth.getFullYear();
			const monthDiff = today.getMonth() - birth.getMonth();
			if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
				age--;
			}
			return age > 0 ? age.toString() : '未知';
		},
		
		// 获取地址信息
		getLocation(province, city, area) {
			const location = [province, city, area].filter(item => item && item.trim()).join('');
			return location || '未填写';
		},
		
		// 获取婚姻状况
		getMaritalStatus(marray) {
			switch (marray) {
				case 1: return '未婚';
				case 2: return '已婚';
				case 3: return '离异';
				case 4: return '丧偶';
				default: return '未知';
			}
		},
		
		// 切换标签页
		switchTab(tab) {
			this.currentTab = tab;
		},

		// 确认服药
		confirmMedication(item) {
			uni.showToast({
				title: `已确认${item.patientName}服药`,
				icon: 'success'
			});
		},
		
		// 显示上传图文弹窗
		showUploadModal(item) {
			// 重置表单数据
			this.uploadForm = {
				activityName: '喂药提醒',
				completionTime: item.activityTime,
				description: '',
				attachments: []
			};
			this.showUploadModalFlag = true;
		},
		
		// 关闭上传图文弹窗
		closeUploadModal() {
			// 直接关闭弹窗，uni-app 中不支持 document.querySelector
			// 可以添加一个简单的延迟来模拟关闭动画
			setTimeout(() => {
				this.showUploadModalFlag = false;
			}, 100);
		},
		
		// 添加附件
		addAttachment() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.uploadForm.attachments.push(res.tempFilePaths[0]);
				}
			});
		},
		
		// 移除附件
		removeAttachment(index) {
			this.uploadForm.attachments.splice(index, 1);
		},
		
		// 提交上传
		submitUpload() {
			// 验证表单数据
			if (!this.uploadForm.activityName.trim()) {
				uni.showToast({
					title: '请输入活动名称',
					icon: 'none'
				});
				return;
			}
			
			uni.showToast({
				title: '上传成功',
				icon: 'success'
			});
			
			// 重置表单并关闭弹窗
			this.uploadForm = {
				activityName: '',
				completionTime: '',
				description: '',
				attachments: []
			};
			this.closeUploadModal();
		},
		
		// 延后提醒
		postponeReminder(item) {
			uni.showToast({
				title: `已延后${item.patientName}的提醒`,
				icon: 'success'
			});
		},

		// 显示巡检上报弹窗
		showInspectionModal(item) {
			// 重置表单数据
			this.inspectionForm = {
				inspector: '王大锤',
				completionTime: item.time,
				description: ''
			};
			this.showInspectionModalFlag = true;
		},
		
		// 关闭巡检上报弹窗
		closeInspectionModal() {
			setTimeout(() => {
				this.showInspectionModalFlag = false;
			}, 100);
		},
		
		// 提交巡检上报
		submitInspection() {
			// 验证表单数据
			if (!this.inspectionForm.inspector.trim()) {
				uni.showToast({
					title: '请输入巡检人姓名',
					icon: 'none'
				});
				return;
			}
			
			if (!this.inspectionForm.completionTime.trim()) {
				uni.showToast({
					title: '请输入完成时间',
					icon: 'none'
				});
				return;
			}
			
			uni.showToast({
				title: '巡检上报成功',
				icon: 'success'
			});
			
			// 重置表单并关闭弹窗
			this.inspectionForm = {
				inspector: '王大锤',
				completionTime: '',
				description: ''
			};
			this.closeInspectionModal();
		},

		// 跳转到信息录入页面
		goToInfoEntry(item) {
			uni.navigateTo({
				url: `/pages/infoEntry/infoEntry?id=${item.id}`
			});
		},

		// 查看护理记录
		viewCareRecord(item) {
			uni.navigateTo({
				url: `/pages/careRecord/careRecord?id=${item.id}`
			});
		},

		// 选择日期
		selectDate(index) {
			this.dateList.forEach(date => {
				date.isActive = false;
			});
			this.dateList[index].isActive = true;
		},

		// 显示记录选项弹窗
		showRecordOptions() {
			this.showRecordOptionsFlag = true;
		},

		// 关闭记录选项弹窗
		closeRecordOptions() {
			this.showRecordOptionsFlag = false;
		},

		// 跳转到记录录入页面
		goToRecordEntry() {
			this.closeRecordOptions();
			uni.navigateTo({
				url: '/pages/recordEntry/recordEntry'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.activities-page {
	min-height: 100vh;
	background: #F8F8F8;
}

.nav-tabs {
	display: flex;
	background: #FFFFFF;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #E0E0E0;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24rpx 0;
	position: relative;
}

.tab-text {
	font-size: 30rpx;
	color: #666666;
	font-weight: 500;
}

.tab-item.active .tab-text {
	color: #E60012;
	font-weight: bold;
}

.tab-underline {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 50rpx;
	height: 6rpx;
	background: #E60012;
	border-radius: 3rpx;
}

.medication-list {
	padding: 30rpx 20rpx;
	background: #F8F8F8;
}

.medication-card {
	// width: 358rpx;
	// height: 238rpx;
	flex-shrink: 0;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx !important;
	margin: 0 auto 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	position: relative;
	overflow: hidden;
	max-width: 700rpx;
}

.medication-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

.medication-card:nth-child(1)::before {
	background: linear-gradient(180deg, rgba(255, 72, 86, 0.15) 0%, rgba(255, 72, 86, 0.05) 50%, rgba(255, 72, 86, 0.02) 100%);
}

.medication-card:nth-child(2)::before {
	background: linear-gradient(0deg, rgba(0, 198, 191, 0.08) 0%, rgba(0, 198, 132, 0.08) 100%);
}

.medication-card:nth-child(3)::before {
	background: #FFFFFF;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
}

.card-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.status-tag {
	display: flex;
	align-items: center;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
}

.status-tag.urgent {
	background: #FFF2E6;
	border: 1rpx solid #FF7D00;
}

.status-tag.postponed {
	background: #E8F5E8;
	border: 1rpx solid #4CAF50;
}

.status-text {
	font-size: 24rpx;
	margin-right: 8rpx;
}

.status-tag.urgent .status-text {
	color: #FF7D00;
}

.status-tag.postponed .status-text {
	color: #4CAF50;
}

.status-time {
	font-size: 24rpx;
	font-weight: bold;
}

.status-tag.urgent .status-time {
	color: #FF7D00;
}

.status-tag.postponed .status-time {
	color: #4CAF50;
}

.card-content {
	margin-bottom: 24rpx;
}

.info-row {
	display: flex;
	margin-bottom: 16rpx;
	align-items: flex-start;
}

.info-label {
	font-size: 28rpx;
	color: #666666;
	min-width: 140rpx;
	margin-right: 16rpx;
}

.info-value {
	font-size: 28rpx;
	color: #333333;
	flex: 1;
	line-height: 1.5;
}

.card-actions {
	display: flex;
	gap: 16rpx;
	justify-content: flex-start;
}

.action-btn {
	width: 160rpx;
	height: 60rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
	border: none;
	transition: all 0.2s ease;
	flex: none;
}

.action-btn.primary {
	background: #FF7D00;
	color: #FFFFFF;
}

.action-btn.primary:active {
	background: #E66A00;
	transform: scale(0.98);
}

.action-btn.secondary {
	background: #FFFFFF;
	color: #999999;
	border: 1rpx solid #E0E0E0;
}

.action-btn.secondary:active {
	background: #F5F5F5;
	transform: scale(0.98);
}

/* 上传图文弹窗样式 */
.upload-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 1000;
	animation: fadeIn 0.3s ease-out;
	padding-bottom: env(safe-area-inset-bottom);
	/* 确保在iOS设备上正确显示 */
	-webkit-overflow-scrolling: touch;
}

.modal-content {
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0 0;
	width: 100%;
	max-height: 85vh;
	box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.15);
	position: relative;
	overflow: hidden;
	animation: slideUp 0.3s ease-out;
	display: flex;
	flex-direction: column;
	margin-bottom: env(safe-area-inset-bottom);
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

@keyframes slideDown {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100%);
	}
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 50rpx 40rpx 30rpx;
	border-bottom: 1rpx solid #E0E0E0;
}

.modal-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333333;
}

.close-btn {
	width: 70rpx;
	height: 70rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.close-icon {
	font-size: 56rpx;
	color: #999999;
}

.modal-body {
	padding: 40rpx;
	flex: 1;
	overflow-y: auto;
	max-height: calc(85vh - 200rpx);
	/* 确保滚动体验流畅 */
	-webkit-overflow-scrolling: touch;
}

.form-item {
	margin-bottom: 40rpx;
}

.form-label {
	font-size: 30rpx;
	color: #666666;
	margin-bottom: 20rpx;
	display: block;
}

.form-input, .form-textarea {
	width: 100%;
	height: 90rpx;
	border: 1rpx solid #E0E0E0;
	border-radius: 12rpx;
	padding: 0 24rpx;
	font-size: 30rpx;
	color: #333333;
	line-height: 1.5;
	box-sizing: border-box;
	background: #FFFFFF;
}

.form-textarea {
	padding: 24rpx;
	min-height: 140rpx;
	height: auto;
	resize: none;
}

.attachment-area {
	display: flex;
	flex-wrap: wrap;
	gap: 24rpx;
	margin-top: 24rpx;
}

.attachment-item {
	position: relative;
	width: 140rpx;
	height: 140rpx;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.attachment-thumb {
	width: 100%;
	height: 100%;
}

.remove-btn {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	width: 44rpx;
	height: 44rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.remove-icon {
	color: #FFFFFF;
	font-size: 26rpx;
	font-weight: bold;
}

.add-attachment {
	width: 140rpx;
	height: 140rpx;
	border: 2rpx dashed #E0E0E0;
	border-radius: 12rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #F8F8F8;
}

.add-icon {
	color: #999999;
	font-size: 56rpx;
	font-weight: bold;
}

.modal-footer {
	display: flex;
	justify-content: space-between;
	padding: 40rpx;
	border-top: 1rpx solid #E0E0E0;
	background: #FFFFFF;
	flex-shrink: 0;
}

.modal-btn {
	width: 45%;
	height: 90rpx;
	border-radius: 45rpx;
	font-size: 34rpx;
	border: none;
	transition: all 0.2s ease;
	min-height: 90rpx;
}

.modal-btn.cancel {
	background: #F5F5F5;
	color: #666666;
	border: 1rpx solid #E0E0E0;
}

.modal-btn.submit {
	background: linear-gradient(135deg, #FF7D00 0%, #FF4856 100%);
	color: #FFFFFF;
}

.modal-btn.cancel:active {
	background: #D0D0D0;
	transform: scale(0.98);
}

.modal-btn.submit:active {
	background: #E66A00;
	transform: scale(0.98);
}

/* 信息录入标签页样式 */
.info-list {
	padding: 30rpx 20rpx;
	background: #F8F8F8;
}

.info-card {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	position: relative;
}

.info-card .card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.elderly-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.status-tag.settled {
	background: #E8F5FF;
	border: 1rpx solid #4CAF50;
	border-radius: 12rpx;
	padding: 8rpx 16rpx;
}

.status-tag.settled .status-text {
	color: #4CAF50;
	font-size: 24rpx;
}

.info-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.info-item {
	flex: 1;
	min-width: 45%;
	display: flex;
	align-items: center;
}

.info-label {
	font-size: 26rpx;
	color: #666666;
	margin-right: 16rpx;
	min-width: 120rpx;
}

.info-value {
	font-size: 26rpx;
	color: #333333;
	font-weight: 500;
	flex: 1;
}

.info-card .card-actions {
	display: flex;
	justify-content: flex-end;
	gap: 20rpx;
}

.info-card .action-btn {
	width: 160rpx;
	height: 70rpx;
	border-radius: 35rpx;
	font-size: 26rpx;
	border: none;
	transition: all 0.2s ease;
}

.info-card .action-btn.primary {
	background: linear-gradient(135deg, #FF7D00 0%, #FF4856 100%);
	color: #FFFFFF;
}

.info-card .action-btn.secondary {
	background: #FFFFFF;
	color: #FF4856;
	border: 1rpx solid #FF4856;
}

/* 用药标签页样式 */
.medication-page {
	padding: 20rpx;
	background: #F8F8F8;
}

.date-selector {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.date-scroll {
	white-space: nowrap;
}

.date-list {
	display: flex;
	gap: 20rpx;
	padding: 0 10rpx;
}

.date-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16rpx 24rpx;
	border-radius: 12rpx;
	border: 1rpx solid #E0E0E0;
	min-width: 80rpx;
}

.date-item.active {
	border: 1rpx solid #FF7D00;
	background: #FFF2E6;
}

.date-week {
	font-size: 24rpx;
	color: #666666;
	margin-bottom: 8rpx;
}

.date-number {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.medication-reminder-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.reminder-item {
	display: flex;
	align-items: flex-start;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.time-indicator {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
	margin-top: 8rpx;
}

.time-dot {
	width: 12rpx;
	height: 12rpx;
	background: #E60012;
	border-radius: 50%;
	margin-right: 12rpx;
}

.time-text {
	font-size: 28rpx;
	color: #333333;
	font-weight: bold;
}

.medication-card {
	flex: 1;
	padding: 10rpx 0;
}

.medication-name {
	font-size: 30rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 8rpx;
	display: block;
}

.medication-instruction {
	font-size: 26rpx;
	color: #666666;
	display: block;
}

/* 巡检上报弹窗样式 */
.inspection-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 1000;
	animation: fadeIn 0.3s ease-out;
	padding-bottom: env(safe-area-inset-bottom);
	/* 确保在iOS设备上正确显示 */
	-webkit-overflow-scrolling: touch;
}

/* 巡检任务标签页样式 */
.inspection-page {
	padding: 20rpx;
	background: #F8F8F8;
}

.inspection-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.inspection-card {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	position: relative;
}

.inspection-card .card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
}

.inspection-card .card-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.inspection-card .card-content {
	margin-bottom: 24rpx;
}

.inspection-card .info-row {
	display: flex;
	margin-bottom: 16rpx;
	align-items: flex-start;
}

.inspection-card .info-label {
	font-size: 28rpx;
	color: #666666;
	min-width: 140rpx;
	margin-right: 16rpx;
}

.inspection-card .info-value {
	font-size: 28rpx;
	color: #333333;
	flex: 1;
	line-height: 1.5;
}

.inspection-card .card-actions {
	display: flex;
	justify-content: flex-end;
	gap: 16rpx;
	margin-top: 20rpx;
}

.inspection-card .action-btn {
	width: 160rpx;
	height: 70rpx;
	border-radius: 8rpx;
	font-size: 26rpx;
	border: none;
	transition: all 0.2s ease;
	flex: none;
	margin-left: auto;
}

.inspection-card .action-btn.primary {
	background: linear-gradient(135deg, #FF7D00 0%, #FF4856 100%);
	color: #FFFFFF;
}

.inspection-card .action-btn.primary:active {
	background: linear-gradient(135deg, #E66A00 0%, #E63946 100%);
	transform: scale(0.98);
}

/* 加载和空状态样式 */
.loading-text, .empty-text {
	text-align: center;
	padding: 80rpx 40rpx;
	color: #999999;
	font-size: 28rpx;
}

.loading-text {
	color: #666666;
}

/* 状态样式扩展 */
.status-tag.overdue {
	background: #FFE5E5;
	border: 1rpx solid #FF4444;
}

.status-tag.overdue .status-text,
.status-tag.overdue .status-time {
	color: #FF4444;
}

.status-tag.pending {
	background: #F0F0F0;
	border: 1rpx solid #CCCCCC;
}

.status-tag.pending .status-text,
.status-tag.pending .status-time {
	color: #666666;
}

/* 悬浮添加按钮 */
.floating-add-btn {
	position: fixed;
	bottom: 120rpx;
	right: 40rpx;
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #FF7D00 0%, #FF4856 100%);
	border-radius: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(255, 125, 0, 0.4);
	z-index: 999;
}

.add-icon {
	color: #FFFFFF;
	font-size: 56rpx;
	font-weight: bold;
}

/* 记录选项弹窗 */
.record-options-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 1000;
	animation: fadeIn 0.3s ease-out;
}

.record-options-modal .modal-content {
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0 0;
	width: 100%;
	max-height: 60vh;
	animation: slideUp 0.3s ease-out;
}

.options-list {
	padding: 0 40rpx 40rpx;
}

.option-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #F0F0F0;
}

.option-item:last-child {
	border-bottom: none;
}

.option-icon {
	font-size: 40rpx;
	margin-right: 30rpx;
}

.option-text {
	flex: 1;
	font-size: 30rpx;
	color: #333333;
}

.option-arrow {
	font-size: 24rpx;
	color: #999999;
}
</style> 